import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:skeletons/skeletons.dart';

import 'custom_skeleton.dart';

//todo:订单详情的骨架屏
class DetailSkeletonWidget extends StatelessWidget {
  const DetailSkeletonWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: Get.width,
      height: Get.height,
      color: Colors.white,
      padding: EdgeInsets.only(
        bottom: 20.w,
      ),
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          Container(
            height: 60.w,
            width: Get.width - 24.w,
            child: CustomSkeleton(
              child: SkeletonAvatar(
                style: SkeletonAvatarStyle(
                  width: Get.width - 24,
                  height: 60.w,
                ),
              ),
            ),
          ),
          SizedBox(height: 12),
          Container(
            width: Get.width - 24.w,
            height: 100.w,
            padding: EdgeInsets.symmetric(
              horizontal: 12.w,
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SkeletonAvatar(
                  style: SkeletonAvatarStyle(
                    width: 100.w,
                    height: 100.w,
                  ),
                ),
                SizedBox(
                  width: 10.w,
                ),
                Container(
                  height: 100.w,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: List.generate(
                      5,
                      (index) => SkeletonLine(
                        style: SkeletonLineStyle(
                            height: 10,
                            randomLength: true,
                            maxLength:
                                (MediaQuery.of(context).size.width * 0.6),
                            borderRadius: BorderRadius.circular(8)),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 20),
          Container(
            child: CustomSkeleton(
              child: SkeletonParagraph(
                style: SkeletonParagraphStyle(
                  padding: EdgeInsets.zero,
                  lines: 3,
                  spacing: 10,
                  lineStyle: SkeletonLineStyle(
                    randomLength: true,
                    height: 10,
                    borderRadius: BorderRadius.circular(8),
                    minLength: MediaQuery.of(context).size.width / 2,
                  ),
                ),
              ),
            ),
            padding: EdgeInsets.symmetric(
              horizontal: 12.w,
            ),
          ),
          SizedBox(height: 12),
          Container(
            child: CustomSkeleton(
              child: SkeletonAvatar(
                style: SkeletonAvatarStyle(
                  width: Get.width - 24,
                  height: 80.w,
                ),
              ),
            ),
            padding: EdgeInsets.symmetric(
              horizontal: 12.w,
            ),
          ),
          SizedBox(height: 12),
          Container(
            child: CustomSkeleton(
              child: SkeletonParagraph(
                style: SkeletonParagraphStyle(
                  padding: EdgeInsets.zero,
                  lines: 8,
                  spacing: 10,
                  lineStyle: SkeletonLineStyle(
                    randomLength: true,
                    height: 10,
                    borderRadius: BorderRadius.circular(8),
                    minLength: MediaQuery.of(context).size.width / 2,
                  ),
                ),
              ),
            ),
            padding: EdgeInsets.symmetric(
              horizontal: 12.w,
            ),
          ),
          SizedBox(height: 12),
          Container(
            padding: EdgeInsets.symmetric(
              horizontal: 12.w,
            ),
            child: Wrap(
              runSpacing: 10.w,
              children: List.generate(
                10,
                (index) => Container(
                  child: CustomSkeleton(
                    child: SkeletonAvatar(
                      style: SkeletonAvatarStyle(
                        width: (Get.width - 40) / 2,
                        height: 200.w,
                      ),
                    ),
                  ),
                  margin: EdgeInsets.only(
                    right: index.isOdd ? 0 : 10.w,
                  ),
                ),
              ),
            ),
          ),
          SizedBox(height: 20),
        ],
      ),
    );
  }
}
